<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<c:import url="../common/meda.jsp"></c:import>

<!-- Site Properties -->
<title>职业测评-${sysDesc}</title>
<link rel="stylesheet" type="text/css"
	href="http://${static_server }/css/semantic.min.css">
<link rel="stylesheet" type="text/css"
	href="http://${static_server }/css/bootstrap-slider.min.css">
<link rel="stylesheet" type="text/css"
	href="http://${static_server }/css/common.css">

<script src="http://${static_server }/js/jquery.min.js"></script>
<script src="http://${static_server }/js/semantic.min.js"></script>
<script src="http://${static_server }/js/Chart.min.js"></script>
<script src="http://${static_server }/js/bootstrap-slider.js"></script>
<script src="http://${static_server }/js/common.js"></script>
<script src="//${static_server }/js/title_menu.js"></script>
<script src="http://${static_server }/js/quiz.js"></script>

</head>
<body class="pushable">
	<c:import url="../common/title_menu.jsp"></c:import>
	<div class="pusher">
		<div id="schoolheadsegment"
			class="ui vertical raised masthead segment">
			<div class="ui container">
				<div class="ui breadcrumb">
					<a class="section" href="http://${static_server }/"><i
						class="icon home"></i>首页</a>
					<div class="divider">/</div>
					<div class="active section">职业测评</div>
				</div>
			</div>
			<!-- content container end -->
		</div>

		<div id="mainsegment" class="ui vertical masthead segment">
			<div class="ui container">
				<div class="ui fluid three steps">
					<div class="active step">
						<i class="warning circle icon"></i>
						<div class="content">
							<div class="title">测评注意事项</div>
						</div>
					</div>
					<div class="disabled step">
						<i class="edit icon"></i>
						<div class="content">
							<div class="title">开始答题</div>
						</div>
					</div>
					<div class="disabled step">
						<i class="search icon"></i>
						<div class="content">
							<div class="title">查看测评结果</div>
						</div>
					</div>
				</div>
				<form class="quiz">
					<div class="ui transition hidden tabular menu">
						<div class="active item" data-tab="0"></div>
					</div>
					<div class="ui tab segment active" data-tab="0">
						<div class="ui tiny dividing header">
							MBTI性格类型测试问卷<i class="orange help inline circle icon visible"
								data-content="我们会自动保存登录用户的测评结果！" data-variation="wide"></i>
						</div>
						<ol class="ui list">
							<li>请在心态平和及时间充足的情况下才开始答题。</li>
							<li>每道题目均有两个答案：A和B。请仔细阅读题目，按照与你性格相符的程度分别给A和B赋予一个分数，并使一组中的两个分数之和为5。最后，请在问卷后的答题纸上相应的方格内填上相应的分数。</li>
							<li>请注意，题目的答案无对错之分，你不需要考虑哪个答案“应该”更好，而且不要在任何问题上思考太久，而是应该凭你心里的第一反应做出选择。</li>
							<li>如果你觉得在不同的情境里，两个答案或许都能反映你的倾向，请选择一个对于你的行为方式来说最自然、最顺畅和最从容的答案。</li>
						</ol>
						<div class="ui message">
							例子：“你参与社交聚会时”<br> A．总是能认识新朋友。（4）<br> B．只跟几个亲密挚友呆在一起。（1）<br>
							很明显，你参与社交聚会时有时能认识新朋友，有时又会只跟几个亲密挚友呆在一起，在以上的例子中，我们给总是能认识新朋友打了4分，而给只跟几个亲密挚友呆在一起打了1分。当然，在你看来，也可能是3+2或者5+0，也可以是其他的组合。<br>
							请在以下范围内一一对应地选择你对以下项目的赋值：
						</div>
						<div class="ui basic center aligned segment">
							<button name="next" class="ui orange right labeled icon button">
								开始职业测评<i class="right arrow icon"></i>
							</button>
						</div>
					</div>
					<c:forEach var="i" begin="1" end="${maxPage }" step="1">
						<div class="ui tab segment" data-tab="${i }">
							<c:forEach var="j" begin="1" end="${i==maxPage ? (size%5) : 5 }"
								step="1">
								<c:set var="index" value="${(i - 1) * 5 + j - 1}"></c:set>
								<c:set var="item" value="${quizs[index] }"></c:set>
								<h4 id="${item.id }_location">${item.id }.${item.problem }</h4>
								<div class="ui middle aligned stackable grid">
									<div class="eight wide column">
										<div class="ui segment">
											<input type="hidden" name="${item.id }_${item.relation_a}"
												id="${item.id }_relation_a" /><span>
												A．${item.option_a }</span><span id="${item.id }_a"
												class="ui circular label">0</span>
										</div>
										<div class="ui  segment">
											<input type="hidden" name="${item.id }_${item.relation_b}"
												id="${item.id }_relation_b" /><span>B．${item.option_b }</span><span
												id="${item.id }_b" class="ui circular label">0</span>
										</div>
									</div>
									<div class="eight wide column" id="myslider">
										<input id="slider${item.id }" name="sliderInput"
											data-number="${item.id }" type="text" />
									</div>
								</div>
								<div class="ui divider"></div>
							</c:forEach>
							<div class="ui error message" style="display: none;"></div>
							<div class="ui basic center aligned segment">
								<button name="pre"
									class='ui orange labeled icon button <c:if test="${i eq 1 }">disabled</c:if>'>
									<i class="left arrow icon"></i> 上5题
								</button>
								<button name="next" class='ui orange right labeled icon button'
									<c:if test="${i eq maxPage }">last="true"</c:if>>
									<i class="right arrow icon"></i>
									<c:choose>
										<c:when test="${i eq maxPage}">
										 查看测评结果
									</c:when>
										<c:otherwise>
										下5题 
									</c:otherwise>
									</c:choose>
								</button>
							</div>
						</div>
					</c:forEach>
					<div class="ui segment tab" data-tab="220">
						<div class="ui tiny dividing header">
							MBTI性格类型测试问卷<i class="orange help inline circle icon visible"
								data-content="我们会自动保存登录用户的测评结果！" data-variation="wide"></i>
						</div>
						<div class="ui success message hide"></div>
						<span class="center aligned" style="font-size: 18px;">您的测试结果为：<a
							target="_blank"></a>(点击查看详细介绍)</span>
						<div class="ui quiz save button" onclick="semantic.quiz.hanlder.saveQuizResult(this);">保存结果到我的职业测评</div>
						<canvas id="radarChart"></canvas>
					</div>
				</form>
			</div>
			<!-- content container end -->
		</div>
		<!-- segment end -->
		<c:import url="../common/footer.jsp"></c:import>
	</div>
	<!-- pusher end -->
</body>
</html>
